<div class="content__title">
    <h1>
        Tables
        <small>Native support</small>
    </h1>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Basic</ng-template>
            <ng-template #body>
                <nz-table #nzTable [nzDataSource]="data" [nzPageSize]="10">
                    <thead nz-thead>
                        <tr>
                            <th nz-th><span>Name</span></th>
                            <th nz-th><span>Age</span></th>
                            <th nz-th><span>Address</span></th>
                            <th nz-th><span>Action</span></th>
                        </tr>
                    </thead>
                    <tbody nz-tbody>
                        <tr nz-tbody-tr *ngFor="let data of nzTable.data">
                            <td nz-td>{{data.name}}</td>
                            <td nz-td>{{data.age}}</td>
                            <td nz-td>{{data.address}}</td>
                            <td nz-td>
                                <span>
                                    <a>Action</a>
                                    <span nz-table-divider></span>
                                    <a>Delete</a>
                                    <span nz-table-divider></span>
                                    <nz-dropdown>
                                        <a class="ant-dropdown-link" nz-dropdown>
                                            More<i class="anticon anticon-down"></i>
                                        </a>
                                        <ul nz-menu>
                                            <li nz-menu-item>1st menu item</li>
                                            <li nz-menu-item>2st menu item</li>
                                            <li nz-menu-item>3st menu item</li>
                                        </ul>
                                    </nz-dropdown>
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Sort</ng-template>
            <ng-template #body>
                <nz-table #nzTable [nzDataSource]="data" [nzPageSize]="10">
                    <thead nz-thead>
                        <tr>
                            <th nz-th><span>Name</span></th>
                            <th nz-th><span>Age<nz-table-sort [(nzValue)]="ageSort" (nzValueChange)="ageSortChange($event)"></nz-table-sort></span></th>
                            <th nz-th><span>Address</span></th>
                        </tr>
                    </thead>
                    <tbody nz-tbody>
                        <tr nz-tbody-tr *ngFor="let data of nzTable.data">
                            <td nz-td>{{data.name}}</td>
                            <td nz-td>{{data.age}}</td>
                            <td nz-td>{{data.address}}</td>
                        </tr>
                    </tbody>
                </nz-table>
            </ng-template>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Selection</ng-template>
            <ng-template #body>
                <nz-table #nzTable [nzDataSource]="data" [nzPageSize]="10" (nzDataChange)="_displayDataChange($event)" (nzPageIndexChange)="_refreshStatus()" (nzPageSizeChange)="_refreshStatus()">
                    <thead nz-thead>
                        <tr>
                            <th nz-th [nzCheckbox]="true">
                                <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate" (ngModelChange)="_checkAll($event)">
                                </label>
                            </th>
                            <th nz-th><span>Name</span></th>
                            <th nz-th><span>Age</span></th>
                            <th nz-th><span>Address</span></th>
                        </tr>
                    </thead>
                    <tbody nz-tbody>
                        <tr nz-tbody-tr *ngFor="let data of nzTable.data">
                            <td nz-td [nzCheckbox]="true">
                                <label nz-checkbox [(ngModel)]="data.checked" (ngModelChange)="_refreshStatus($event)">
                                </label>
                            </td>
                            <td nz-td>{{data.name}}</td>
                            <td nz-td>{{data.age}}</td>
                            <td nz-td>{{data.address}}</td>
                        </tr>
                    </tbody>
                </nz-table>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Ajax</ng-template>
            <ng-template #body>
                <nz-table #nzTable
                    [nzAjaxData]="_ajaxDataSet"
                    [nzShowSizeChanger]="true"
                    [nzLoading]="_ajaxLoading"
                    [nzTotal]="_total"
                    [(nzPageIndex)]="_current"
                    (nzPageIndexChange)="_ajaxRefreshData()"
                    [(nzPageSize)]="_pageSize"
                    (nzPageSizeChange)="_ajaxRefreshData()">
                    <thead nz-thead>
                    <tr>
                        <th nz-th><span>Name</span></th>
                        <th nz-th><span>Age</span></th>
                        <th nz-th><span>Email</span></th>
                    </tr>
                    </thead>
                    <tbody nz-tbody>
                    <tr nz-tbody-tr *ngFor="let data of nzTable.data">
                        <td nz-td>
                        <a>{{data.name.first}} {{data.name.last}}</a>
                        </td>
                        <td nz-td>{{data.gender}}</td>
                        <td nz-td>{{data.email}}</td>
                    </tr>
                    </tbody>
                </nz-table>
            </ng-template>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card>
            <ng-template #title>Dynamic Settings</ng-template>
            <ng-template #body>
                <form nz-form [nzLayout]="'inline'" class="mb-sm">
                    <div nz-row nz-form-item>
                        <div nz-form-label>
                            <label>Bordered</label>
                        </div>
                        <div nz-form-control>
                            <nz-switch [(ngModel)]="_bordered" [ngModelOptions]="{standalone: true}"></nz-switch>
                        </div>
                    </div>
                    <div nz-row nz-form-item>
                        <div nz-form-label>
                            <label>Loading</label>
                        </div>
                        <div nz-form-control>
                            <nz-switch [(ngModel)]="_loading" [ngModelOptions]="{standalone: true}"></nz-switch>
                        </div>
                    </div>
                    <div nz-row nz-form-item>
                        <div nz-form-label>
                            <label>Pagination</label>
                        </div>
                        <div nz-form-control>
                            <nz-switch [(ngModel)]="_pagination" [ngModelOptions]="{standalone: true}"></nz-switch>
                        </div>
                    </div>
                    <div nz-row nz-form-item>
                        <div nz-form-label>
                            <label>Title</label>
                        </div>
                        <div nz-form-control>
                            <nz-switch [(ngModel)]="_title" [ngModelOptions]="{standalone: true}"></nz-switch>
                        </div>
                    </div>
                    <div nz-row nz-form-item>
                        <div nz-form-label>
                            <label>Column Header</label>
                        </div>
                        <div nz-form-control>
                            <nz-switch [(ngModel)]="_header" [ngModelOptions]="{standalone: true}"></nz-switch>
                        </div>
                    </div>
                    <div nz-row nz-form-item>
                        <div nz-form-label>
                            <label>Footer</label>
                        </div>
                        <div nz-form-control>
                            <nz-switch [(ngModel)]="_footer" [ngModelOptions]="{standalone: true}"></nz-switch>
                        </div>
                    </div>
                    <div nz-row nz-form-item>
                        <div nz-form-label>
                            <label>Size</label>
                        </div>
                        <div nz-form-control>
                            <nz-radio-group [(ngModel)]="_size" [ngModelOptions]="{standalone: true}">
                                <label nz-radio-button [nzValue]="'default'">
                                    <span>Default</span>
                                </label>
                                <label nz-radio-button [nzValue]="'middle'">
                                    <span>Middle</span>
                                </label>
                                <label nz-radio-button [nzValue]="'small'">
                                    <span>Small</span>
                                </label>
                            </nz-radio-group>
                        </div>
                    </div>
                    <div nz-row nz-form-item>
                        <div nz-form-label>
                            <label>No Result</label>
                        </div>
                        <div nz-form-control>
                            <nz-switch [(ngModel)]="_noresult" (ngModelChange)="_toggleData()" [ngModelOptions]="{standalone: true}"></nz-switch>
                        </div>
                    </div>
                </form>
                <nz-table
                    #nzTable
                    [nzDataSource]="_dataSet"
                    [nzPageSize]="10"
                    [nzBordered]="_bordered"
                    [nzLoading]="_loading"
                    [nzIsPagination]="_pagination"
                    [nzShowFooter]="_footer"
                    [nzShowTitle]="_title"
                    [nzSize]="_size">
                    <span nz-table-title>Here is Title</span>
                    <thead nz-thead *ngIf="_header">
                        <tr>
                            <th nz-th><span>Name</span></th>
                            <th nz-th><span>Age</span></th>
                            <th nz-th><span>Address</span></th>
                            <th nz-th><span>Action</span></th>
                        </tr>
                    </thead>
                    <tbody nz-tbody>
                        <tr nz-tbody-tr *ngFor="let data of nzTable.data">
                            <td nz-td>{{data.name}}</td>
                            <td nz-td>{{data.age}}</td>
                            <td nz-td>{{data.address}}</td>
                            <td nz-td>
                                <span>
                                    <a>Action 一 {{data.name}}</a>
                                    <span nz-table-divider></span>
                                    <nz-popconfirm [nzTitle]="'Are you sure？'" [nzOkText]="'ok'" [nzCancelText]="'cancel'" (nzOnConfirm)="confirm()" (nzOnCancel)="cancel()">
                                      <a nz-popconfirm>Delete</a>
                                    </nz-popconfirm>
                                    <span nz-table-divider></span>
                                    <nz-dropdown>
                                        <a class="ant-dropdown-link" nz-dropdown>
                                            More actions <i class="anticon anticon-down"></i>
                                        </a>
                                        <ul nz-menu>
                                            <li nz-menu-item>1st menu item</li>
                                            <li nz-menu-item>2st menu item</li>
                                            <li nz-menu-item>3st menu item</li>
                                        </ul>
                                    </nz-dropdown>
                                </span>
                            </td>
                        </tr>
                    </tbody>
                    <span nz-table-footer>Here is footer</span>
                </nz-table>
            </ng-template>
        </nz-card>
    </div>
</div>
